import React, { useState } from 'react';
import { Col, Row, Slider } from 'antd';
import HeaderView from '../components/HeaderView';
const gutters = {};
const vgutters = {};
const colCounts = {};
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
  gutters[i] = value;
});
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
  vgutters[i] = value;
});
[1, 2, 3, 4, 6, 8, 12].forEach((value, i) => {
  colCounts[i] = value;
});

const MonitorView = () => {
  // 水平间距，垂直间距，以及一行几个盒子
  const [gutterKey, setGutterKey] = useState(1);
  const [vgutterKey, setVgutterKey] = useState(1);
  const [colCountKey, setColCountKey] = useState(2);
  // 盒子总数
  let [total, setTotal] = useState(20);
  //列数
  const colCount = colCounts[colCountKey];
  // 一个行 盒子数组
  const cols = [];
  for (let i = 0; i < colCount; i++) {
    cols.push(
      <Col key={i.toString()} span={24 / colCount}>
        <video
          muted
          src="http://localhost:3000/video/anime?video=20220811_163904.mp4"
          width="100%"
          controls
          autoPlay
        ></video>
      </Col>
    );
  }
  // 行数
  let rowCount = Math.floor(total / colCount);
  let rows = [];
  for (let i = 0; i < rowCount; i++) {
    rows.push(cols);
  }
  let lastRow = [];
  for (let i = 0; i < total % colCount; i++) {
    lastRow.push(
      <Col key={i.toString()} span={24 / colCount}>
        <video
          muted
          src="http://localhost:3000/video/anime?video=20220811_163904.mp4"
          width="100%"
          controls
          autoPlay
        ></video>
      </Col>
    );
  }
  rows.push(lastRow);
  console.log(rows);

  return (
    <div>
      <HeaderView />
      <div
        style={{
          display: 'flex',
          width: '100vw',
          justifyContent: 'space-around',
        }}
      >
        {/* 栅格配置器 */}
        {[
          {
            label: '水平间距',
            marks: gutters,
            key: gutterKey,
            onChange: setGutterKey,
          },
          {
            label: '垂直间距',
            marks: vgutters,
            key: vgutterKey,
            onChange: setVgutterKey,
          },
          {
            label: '列数',
            marks: colCounts,
            key: colCountKey,
            onChange: setColCountKey,
          },
        ].map((item, index) => (
          <div key={index}>
            <span>{item.label} </span>
            <div
              style={{
                width: '30vw',
              }}
            >
              <Slider
                min={0}
                max={Object.keys(item.marks).length - 1}
                value={item.key}
                onChange={item.onChange}
                marks={item.marks}
                step={null}
                tipFormatter={(value) => value && item.marks[value]}
              />
            </div>
          </div>
        ))}
      </div>

      <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{rows}</Row>
    </div>
  );
};

export default MonitorView;
